<template>
  <div class="contact-us">
    <h2>{{ pageData.cuCard && pageData.cuCard.title }}</h2>
    <div class="contact-us-forms">
      <template v-if="pageData.cuCard && pageData.cuCard.inputs">
        <div v-for="(item, index) in pageData.cuCard.inputs" :key="index" class="contact-us-forms-item" :style="{ height: item.types === 'textarea' ? '200px' : '60px' }">
          <label>{{ item.label }}<span v-if="item.mustHas === '1'">*</span></label>
          <el-input v-if="item.types === 'textarea'" type="textarea" :max="parseInt(item.maxLen)" v-model="form[item.valKey]" />
          <el-input v-else v-model="form[item.valKey]" :max="parseInt(item.maxLen)" />
        </div>
      </template>
      <div @click="submitForm" class="contact-us-btn">{{ pageData.cuCard && pageData.cuCard.submits }}</div>
    </div>
  </div>
</template>

<script setup name="ContactUs">
import {getModelData, addContactUs} from "@/api/model.js";

const {proxy} = getCurrentInstance();

const pageData = ref({});
const form = ref({});

const loadPageData = async () => {
  const language = proxy.getLanguage();
  const modelKey = 'contactUsCard';
  // 获取数据
  const res = await getModelData(modelKey, language);
  if (res && res.code === 200) {
    // 判断是否有数据
    if (res.data) {
      pageData.value = JSON.parse(res.data);
    }
  }
}

/** 校验表单 */
const checkForm = () => {
  return true;
}

/** 提交数据 */
const submitForm = () => {
  if (!checkForm()) {
    proxy.$modal.msgError(pageData.value.cuCard && pageData.value.cuCard.errorMsg);
    return;
  }
  addContactUs(form.value).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess(pageData.value.cuCard && pageData.value.cuCard.successMsg);
      // 清空数据
      form.value = {};
    }
  })
}


onBeforeMount(() => {
  loadPageData();
});



</script>

<style lang="scss">

.contact-us {
  padding: 40px;
  background-color: rgb(228, 233, 237);

  h2 {
    margin-bottom: 20px;
    color: rgb(0, 74, 120);
  }

  &-forms {

    &-item {
      display: flex;
      // align-items: center;
      height: 60px;
      background-color: rgb(243, 247, 250);
      padding: 10px 20px;
      margin-top: 20px;

      label {
        margin-right: 10px;
      }

      .el-input {
        border: none;
        background-color: rgb(243, 247, 250);

        .el-input__wrapper {
          border: none;
          background-color: rgb(243, 247, 250);
          box-shadow: none;

          input {
            font-size: 18px;
          }
        }
      }

      .el-textarea {


        .el-textarea__inner {
          border: none;
          background-color: rgb(243, 247, 250);
          box-shadow: none;
          font-size: 18px;
          height: 160px;
        }
      }
    }

  }

  &-btn {
    margin-top: 40px;
    padding: 10px 30px;
    color: #ffffff;
    background-color: rgb(210, 1, 2);
    display: inline-block;
    user-select: none;
    cursor: pointer;
  }
}

</style>

